<template>
  <div>
    <nav-bar :title="title" rightBar/>
    <div class="content-body">
      <page-skeleton title avatar :loading="false" :row="1" :count="10">
        <van-index-bar :index-list="indexList" :sticky="stickyCfg.sticky" :sticky-offset-top="stickyCfg.offsetTop"  @select="onSelectIndexBar">
          <a id="↑" />
          <van-index-anchor index="↑">功能列表</van-index-anchor>
          <contact-cell title="新的朋友" @click.native="onClickContactAction('newFriend')"/>
          <contact-cell title="仅聊天的朋友" @click.native="onClickContactAction('onlyChat')"/>
          <contact-cell title="群聊" @click.native="onClickContactAction('groups')"/>
          <contact-cell title="标签" @click.native="onClickContactAction('tags')"/>
          <contact-cell title="公众号" @click.native="onClickContactAction('subscription')"/>
          <div v-for="(item, index) in customerList"  :key="index" class="index-group">
            <a :id="item.firstLetter" />
            <van-index-anchor :index="item.firstLetter">{{item.firstLetter == "☆"? "星标朋友": item.firstLetter}}</van-index-anchor>
            <div v-for="(row,index) in item.list" :key="index">
              <contact-cell :title="row.name" @click.native="onClickContactCell(row)"/>
            </div>
          </div>
        </van-index-bar>
      </page-skeleton>
    </div>
  </div>
</template>

<script>
  import PageSkeleton from "@/components/PageSkeleton";
  import ContactCell from "@/components/ContactCell"
  import NavBar from "@/components/NavBar"
  export default {
    name: "Contacts",
    components: {
      PageSkeleton,
      ContactCell,
      NavBar
    },
    data () {
      return {
        title: "通讯录",
        stickyCfg: {
          sticky:true,
          offsetTop: 44
        },
        indexList: ["↑","☆","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","#"],
        /** mock客户数据*/
        customerList: [
          {
            firstLetter: "☆",
            list: [
              { code: "☆B01", name: "☆1客户" },
              { code: "☆B02", name: "☆2客户" },
              { code: "☆B03", name: "☆3客户" },
            ],
          },
          {
            firstLetter: "A",
            list: [
              { code: "AB01", name: "A1客户" },
              { code: "AB02", name: "A2客户" },
              { code: "AB03", name: "A3客户" },
            ],
          },
          {
            firstLetter: "B",
            list: [
              { code: "BB01", name: "B1客户" },
              { code: "BB02", name: "B2客户" },
              { code: "BB03", name: "B3客户" },
              { code: "BB04", name: "B4客户" },
            ],
          },
          {
            firstLetter: "C",
            list: [
              { code: "CB01", name: "C1客户" },
              { code: "CB02", name: "C2客户" },
              { code: "CB03", name: "C3客户" },
              { code: "CB04", name: "C4客户" },
              { code: "CB05", name: "C5客户" },
            ],
          },
          {
            firstLetter: "D",
            list: [
              { code: "DB01", name: "D1客户" },
              { code: "DB02", name: "D2客户" },
              { code: "DB03", name: "D3客户" },
              { code: "DB04", name: "D4客户" },
              { code: "DB05", name: "D5客户" },
              { code: "DB06", name: "D6客户" },
            ],
          },
          {
            firstLetter: "E",
            list: [
              { code: "EB01", name: "E1客户" },
              { code: "EB02", name: "E2客户" },
              { code: "EB03", name: "E3客户" },
              { code: "EB04", name: "E4客户" },
              { code: "EB05", name: "E5客户" },
              { code: "EB06", name: "E6客户" },
            ],
          },
        ],
      }
    },
    mounted() {
      this.onSelectIndexBar("↑")
    },
    methods: {
      onSelectIndexBar(action) {
        let offsetTop = document.getElementById(action).offsetTop;
        document.getElementById("app").scrollTo(0, offsetTop - 44);
      },
      onClickContactAction(action) {
        this.$toast(action);
      },
      onClickContactCell(values) {
        this.$toast(JSON.stringify(values));
      }
    }
  };
</script>
<style scoped>
  /deep/.van-index-bar .van-index-anchor{
    font-size: 12px;
    background-color: #ededed;
  }
  /deep/.van-index-bar .van-index-bar__index{
    font-weight: normal;
    margin: 1px 2px 0 0;
  }
  .content-body {
    display: inline-flex;
    width: 100%;
    margin-top: 1.22667rem;
    margin-bottom: 1.33333rem;
  }
</style>